<template>
    <ul class="m-cvrlst m-cvrlst-alb2 f-cb">
        <li v-for="album in limitedAlbums" :key="album.id">
            <div class="u-cover u-cover-alb2">
                <img :src="album.cover" :alt="album.name" />
                <a :href="`/album?id=${album.id}`" class="msk" :title="album.name"></a>
                <a href="javascript:;" class="icon-play f-alpha f-fr" title="播放" :data-res-id="album.id"
                    data-res-type="19" data-res-action="play"></a>
            </div>
            <p class="dec">
                <a class="tit f-thide s-fc0" :href="`/album?id=${album.id}`" :title="album.name">{{ album.name }}</a>
            </p>
            <p class="f-thide">
                <span class="nm f-thide" :title="album.artistNames.join(' / ')">
                    <template v-for="(artist, index) in album.artists" :key="artist.id">
                        <a class="s-fc3" :href="`/artist?id=${artist.id}`">{{ artist.name }}</a>
                        <span v-if="index !== album.artists.length - 1">&nbsp;/&nbsp;</span>
                    </template>
                </span>
            </p>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
    albums: {
        id: number
        name: string
        cover: string
        artists: { id: number; name: string }[]
        artistNames: string[]
    }[],
    limit?: number
}>()

// 计算显示的专辑数组，如果 limit 未传或大于 albums 长度，则显示全部
const limitedAlbums = computed(() => {
    if (!props.limit || props.limit >= props.albums.length) {
        return props.albums
    }
    return props.albums.slice(0, props.limit)
})
</script>

<style lang="scss" scoped>
.m-cvrlst {
    margin: 20px 0 0 -33px;

    li {
        padding-left: 33px;
        width: 153px;
        height: 178px;
        float: left;
        display: inline-block;
        overflow: hidden;
        padding: 0 0 30px 30px;
        line-height: 1.4;
        box-sizing: content-box;

        p {
            width: 100%;
        }
    }

    .u-cover-alb2 {
        width: 130px;
        height: 130px;
    }

    .u-cover {
        position: relative;
        display: block;

        &:hover .icon-play {
            display: inline-block;
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .msk {
            position: absolute;
            top: 0;
            left: 0;
            width: 153px;
            height: 130px;
            background-position: 0 -845px !important;
            background: url(../assets/Home/Recommend/coverall.png) no-repeat;
        }

        .icon-play {
            position: absolute;
            right: 10px;
            bottom: 5px;
            display: none;
            left: 94px;
            width: 28px;
            height: 28px;
            background-position: 0 -140px !important;
            background: url(../assets/Home/Recommend/iconall.png) no-repeat;

            &:hover {
                background-position: 0 -170px !important;
            }
        }
    }

    .dec {
        margin: 8px 0 3px;
        font-size: 14px;

        .tit {
            display: inline-block;
            max-width: 100%;
            vertical-align: middle;
        }
    }

    .nm {
        display: inline-block;
        max-width: 85%;
        vertical-align: middle;
    }
}
</style>